<template>
	<view id="shopMall" @click="examClick">
		<!-- 背景半椭圆 -->
		<view id="background-top" />
		
		<!-- 头部搜索框 -->
		<view class="header">
			<uni-row>
					<uni-col :span="24">
						<uni-search-bar class="searchBar" placeholder="请输入搜索内容" :radius="200" @confirm="toSearch" v-model="searchValue"
							clearButton="auto" cancelButton="none"/>
					
					</uni-col>
					<!-- <uni-col :span="4">
						<view class="consult">
							<text class="consult_text">咨询</text>
						</view>
					</uni-col> -->
				</uni-row>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper">
			<uni-swiper-dot class="swiper-dot" :info="swiperList" :current="swiperIndex" mode="round"
						 field="content">
				<swiper class="swiper-box"
						@change="swpierChangeIndex"
						autoplay circular
						previous-margin="30px"
						next-margin="30px"
						>
					<swiper-item v-for="(item, index) in swiperList" :key="item">
						<image :class="{'active':index==swiperIndex,'beside':index!=swiperIndex}" :src="'../../static/img/swiper/'+item" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<!-- 商品列表 -->
		<view class="shopList" :style="{top: (shopList.top?shopList.top:220)+'px'}">
			<!-- 分类列表 -->
			<view class="shopClassList">
				<!-- 分类窗口 -->
				<view class="classBox">
					<text  class="classItem" :class="{'active':index==shopClass.index}"
					 v-for="(item,index) in shopClass.classList" :key="index"
					 @click="changeShopClass(index)"
					 >{{item}}</text>
				</view>
				<!-- 分类按钮 -->
				<view class="classButton" @click.stop="shopClass.isShow=!shopClass.isShow">
					<uni-icons type="list" color="#3a3a3a"></uni-icons>
					{{shopClass.isShow?'收起':'分类'}}
				</view>
				<!-- 分类展示板块 -->
				<view class="show-class-list" v-if="shopClass.isShow" @click.stop="()=>{}">
					<view class="show-class-item" :class="{active:index==shopClass.index}"
					 v-for="(item,index) in shopClass.classList" :key="index"
					 @click.stop="changeShopClass(index)">
						{{item}}
					</view>
				</view>
			</view>
			
			<!-- 商品List -->
			<view class="shopCardList">
				<!-- 商品-item -->
				<view class="shop-card" v-for="(item,index) in shopList.list" :key="item.title">
					<view class="card-img">
						<image :src="'../../static/img/goods/'+item.src" mode="widthFix"></image>
					</view>
					<view class="card-title">
						<text class="main-title">
							<!-- 商品-{{item.name}} -->
							{{item.title}}
						</text>
						<text class="card-price">
							￥
							<text class="price-text">{{item.price}}</text>
						</text>
					</view>
					
				</view>
			</view>
			
			
			<view class="reachBottom">
				<uni-load-more iconType="circle" :content-text="{contentdown:'加载更多'}" :status="shopListStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索框
				searchValue:"",
				
				// 轮播图
				swiperIndex:0,
				swiperList:["swiper0.jpg","swiper1.jpg","swiper2.jpg","swiper3.jpg","swiper4.jpg","swiper5.jpg"],
				
				// 商品列表
				shopListNumber: 5,
				shopListStatus: "more",
				shopList:{
					top: null,
					list:[
						{title:"中华红血橙",price:"32.80",src:"20220405121238.jpg"},
						{title:"海南贵妃芒大果/核薄如卡，肉质细腻",price:"28.70",src:"20220405121232.jpg"},
						{title:"【新化蛮有味】湘蚩味剁椒蒜头500g",price:"23.80",src:"20220405121227.jpg"},
						{title:"湘西手工豆皮（240g/袋）",price:"13.40",src:"20220405121220.jpg"}
					]
				},
				// 商品分类栏
				shopClass:{
					classList:["小店推荐","生态农时","时令鲜果","地道美食","小店","生态","时令","地道美食"],
					index:0,
					isShow:false
				}
			}
		},
		onReachBottom(){
			if(this.shopListStatus!='noMore'){
				this.shopListStatus="loading";
				setTimeout(()=>{
					this.shopListStatus="noMore";
				},1000)
			}
		},
		methods: {
			// 页面检测点击事件
			examClick(){
				this.shopClass.isShow=false;
			},
			// 搜索框
			toSearch(){
				
			},
			// 轮播图
			swpierChangeIndex(e){
				this.swiperIndex=e.detail.current;
			},
			onPageScroll({scrollTop}) {
				this.shopList.top=220-(scrollTop*0.5);
			},
			
			// 商品列表
			// 分类栏
			changeShopClass(index){
				this.shopClass.index=index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	#shopMall{
		position: relative;
		font-size: 14px;
		line-height: 24px;
		>view{
			margin: 0 5px;
		}
		
		// 商品列表
		.shopList{
			position: absolute;
			margin: 0;
			padding: 5px 5px;
			width: 100%;
			background-color: #fff;
			border-radius: 20px 20px 0 0;
			border: 1px solid rgba(0, 0, 0, 0.1);
			box-shadow: 0px -7px 3px -7px rgba(0, 0, 0, 0.08);
			transition: top 0.1s;
			
			// 商品分类栏
			.shopClassList{
				position: sticky;
				top: 0;
				width: 100%;
				padding: 5px 0px;
				background-color: #fff;
				z-index: 10;
				padding-right: 20px;
				
				// 分类栏BOX
				.classBox::-webkit-scrollbar{
					display: none;
				}
				.classBox{
					width: 85%;
					margin: 5px;
					display: flex;
					align-items: center;
					overflow-x: auto;
					
					.classItem{
						display: inline-block;
						white-space: nowrap;
						font-size: 18px;
						font-weight: bold;
						color: #909399;
						margin-right: 10px;
						transition: all 0.3s;
					}
					.classItem.active{
						color: #ec3525;
					}
				}
				
				// 分类按钮
				.classButton{
					position: absolute;
					top: 10.5px;
					border: 0;
					margin: auto 0;
					right: 5px;
					width: 50px;
					text-align: center;
					// border-radius: 50%;
					background-color: rgba($color: #fff, $alpha: 0.8);
					font-size: 16px;
					font-weight: bold;
					color: #3a3a3a;
				}
				
				// 分类展示板块
				.show-class-list{
					position: absolute;
					width: 100%;
					padding: 10px;
					background-color: #fff;
					display: flex;
					justify-content: flex-start;
					border-radius: 10px;
					border: 1px solid rgba(0, 0, 0, 0.1);
					box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
					flex-wrap: wrap;
					z-index: 10;
					
					.show-class-item{
						font-size: 14px;
						padding: 2px 5px;
						margin: 2px 5px;
						border: 1px solid rgba(0, 0, 0, 0.1);
						border-radius: 100px;
						white-space: nowrap;
						flex: 1;
						text-align: center;
						font-weight: bold;
						background-color: #fff;
						transition: all 0.3s;
					}
					
					.show-class-item.active{
						background-color: #f2f2f2;
						border: 1px solid #f2f2f2;
						color: #ec3525;
					}
				}
			}
			
			.shopCardList{
				// margin-top: 10px;
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				justify-content: space-around;
				
				.shop-card{
					width: calc(50% - 10px);
					display: flex;
					flex-direction: column;
					justify-content: start;
					align-items: center;
					flex-wrap: wrap;
					overflow: hidden;
					border: 1px solid  rgba($color: #DCDCDC, $alpha: 0.5);
					border-radius: 10px;
					box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
					margin-bottom: 8px;
					
					.card-img{
						width: 100%;
						image{
							width: 100%;
						}
					}
					
					.card-title{
						width: 100%;
						display: flex;
						flex-direction: column;
						padding: 0 10px;
						padding-bottom: 10px;
						align-items: flex-start;
						
						.main-title{
							// display: inline-block;
							width: 100%;
							height: 50px;
							font-size: 15px;
							font-weight: bold;
							color: #3a3a3a;
							// 两行显示
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp:2;
							-webkit-box-orient:vertical;
						}
						.card-price{
							font-size: 14px;
							color: #e1251b;
							font-weight: bold;
							
							.price-text{
								font-size: 16px;
							}
						}
					}
				}
			}
			
			// >.title{
			// 	z-index: 10;
			// 	position: sticky;
			// 	top: 0;
			// 	font-size: 16px;
			// 	text-align: center;
			// 	color: #909399;
			// 	padding: 5px 0;
			// 	font-weight: bold;
			// 	background-color: #fff;
			// 	width: 100%;
			// 	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
			// 	box-shadow: 0px 7px 3px -7px rgba(0, 0, 0, 0.08);
			// }
			
			// .infomation-card:nth-child(n+2){
			// 	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
			// }
			// .shop-card{
			// 	width: calc(50% -2.5px);
			// 	display: flex;
			// 	flex-direction: column;
			// 	align-items: center;
			// 	padding: 10px;
			// 	background-color: #fff;
				
				
			// 	margin-bottom: 5px;
				
			// 	// 图片
			// 	.card-img{
			// 		width: 100%;
			// 		height: auto;
			// 		image{
			// 			width: 80px;
			// 			height: 80px;
			// 		}
			// 		margin-right: 10px;
			// 	}
				
			// 	// 内容栏
			// 	.card-title{
			// 		display: flex;
			// 		flex-direction: column;
			// 		justify-content: space-between;
			// 		height: 80px;
			// 		width: calc(100% - 90px);
					
			// 		// 主标题
			// 		.main-title{
			// 			width: 100%;
			// 			font-size: 15px;
			// 			color: #3a3a3a;
			// 			// 两行显示
			// 			overflow: hidden;
			// 			text-overflow: ellipsis;
			// 			display: -webkit-box;
			// 			-webkit-line-clamp:2;
			// 			-webkit-box-orient:vertical;
			// 		}
			// 		// 副标题
			// 		.sub-title{
			// 			font-size: 12px;
			// 			margin-top: 5px;
			// 			color: #909399;
			// 		}
			// 	}
			// }
		}
	}
	
</style>

<!-- 技术问题 穿透样式 -->
<style lang="scss">
	#background-top{
		margin: 0!important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 150px;
		background-color: #ec3525;
		border-radius: 0 0 30% 30%;
		z-index: -10;
	}
	
	// 当前组件
	#shopMall {
		//头部
		.header{
			// 搜索框边框
			.uni-searchbar{
				padding: 0;
			}
			// 搜索框box
			.uni-searchbar__box{
				height: 30px;
			}
			
			// 咨询按钮
			.consult {
				display: inline-block;
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				color: white;
				font-weight: bold;
			}
		}
		
		// 轮播图
		.swiper{
			// height: 200px;
			margin: 0!important;
			margin-top: 20px!important;
			border-radius: 10px;
			overflow: hidden;
			
			// 图片样式
			image{
				width: 100%;
				height: 150px;
				border-radius: 10px;
				transition: all 0.3s;
				
			}
			image.active{
				transform: scale(1);
			}
			image.beside{
				transform: scale(0.9);
			}
			
			// 轮播图点
			.uni-swiper__dots-item{
				transition: all 0.5s;
				background-color: rgba($color: #fff, $alpha: 0.3)!important;
			}
		}
	}

	
</style>
